<template>
  <div class="artlcle-container">
    <!-- 文章列表 -->
     <van-cell class="cell-container" :to="'/article/' + articleListItem.art_id">
       <div class="title" slot="title">{{articleListItem.title}}</div>
       <div slot="label" class="label">
         <div class="cover3" v-if="articleListItem.cover.type=== 3 ">
          <van-image  :src="item" v-for="(item, index) in articleListItem.cover.images" :key="index"/>
        </div>
         <span>{{articleListItem.aut_name}}</span>
         <span>{{articleListItem.comm_count}}评论</span>
         <span>{{articleListItem.pubdate | formatDate}}</span>
       </div>
         <van-image class="cover" v-if="articleListItem.cover.type=== 1"  :src="articleListItem.cover.images[0]"/>
     </van-cell>
  </div>
</template>

<script>
export default {
  name: 'articleItem',
  data () {
    return {
    }
  },
  props: {
    articleListItem: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped lang="less">
.cell-container {
  .title {
    font-size: 32px;
    color: #B4B4B4;
    width: 100%;
  }
}
// label样式
.label {
  span {
    margin-right: 20px;
  }
}
// 三张图片样式
.cover3 {
  display: flex;
  justify-content: center;
  .van-image {
    flex: 1;
    height: 200px;
  }
  .van-image:nth-child(2) {
    margin: 0 15px;
  }
}
// 单张图片样式
.cover {
  width: 200px;
  height: 200px;
}
</style>
